    <%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/18 0018
  Time: 20:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/base.css">
    <title>Title</title>
    <style>
        .ml-10{
            margin-left: 10px;
        }
    </style>
</head>
<body>

<div class="page fx-col">
    <div class="noshrink fx">
        <div class="fx-g1 fx align-center">
            <label><input type="text" id="keywords" placeholder="请输入关键字" class="layui-input"></label>
            <button id="search_btn" class="layui-btn ml-10">搜索</button>
        </div>
        <button style="margin-left: 15px;" class="edit-btn layui-btn layui-btn-normal" data-id="0">新增</button>
    </div>

    <div class="fx-g1">
        <table class="layui-table">

            <thead>
            <tr>
                <th>序号</th>
                <th>年纪名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="data-list">


            </tbody>
        </table>
    </div>
</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script>

    function search(){
        let keywords =$("#keywords").val();
        $.ajax({
            url:"grade/list",
            type: "post",
            data:{keywords},
            dataType:"json",
            success(res){
                let data =res.data;
                let content ="";
                data.forEach((item,i) =>{

                    content+=
             `<tr>
                <td>${"${i+1}"}</td>
                <td>${"${item.name}"}</td>
                <td>
                    <button type="button" data-id=${"${item.id}"} class="edit-btn layui-btn layui-btn-normal layui-btn-sm">
                        <i class="layui-icon layui-icon-edit"></i>
                    </button>
                    <button type="button" data-id=${"${item.id}"} class="del-btn layui-btn layui-btn-danger layui-btn-sm">
                        <i class="layui-icon layui-icon-delete"></i>
                    </button>
                </td>
            </tr>`
                })
                $("#data-list").html(content);
                layer.closeAll();

            }
        })
    }

    $(function (){
        $(document).on("click",".del-btn",function (){
            let id = $(this).data("id");

            layer.confirm('是否确认删除该数据',{icon:3,title:'提示'},function (index){

                $.ajax({
                    url: "grade/del",
                    data: {id},
                    dataType: "json",
                    success(res) {
                        if(res.success()){
                            layer.msg('删除成功',{icon: 6},function (){
                              search();
                            });
                        }else{
                            layer.msg(res.msg,{icon:2});
                        }
                    }
                })
                layer.close(index);

            },function (index){
                alert("点了取消")
                layer.close(index);
            });
        }).on("click",".edit-btn",function () {
            layer.open({
                type: 2,
                area:['500px','300px'],
                content:'grade/edit'
            });
        }).on("click","#search_btn",function (){
            search();
        })

        search();
    })




</script>


</html>
